<script setup>
import TopMain from "@/1-topBar/topMain.vue";
import {ref, onMounted, watch} from "vue"
import axios from "axios"
import ClassifyLeftDown from "@/1-classify/classify-left-down.vue";
import LocalBottom from "@/1-classify/local-bottom.vue";
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
import details2 from "@/1-home/details2.vue";
// 选择样式参数
const chooseDate = ref('');
const Color = ref('deeppink')
const ColorX = ref('white')
const leftUpHigh = ref('240')
const cityHeight = ref('90')
const countFind = ref(0)
// 搜索条件子组件传参
const city = ref('全国')
const classify = ref('全部')
const time = ref('全部')
const countFindData = ref({
  city: city.value,
  classify: classify.value,
  time: time.value,
})
// 分类
const categories = ['音乐会', '演唱会', '话剧歌剧', '曲苑杂坛', '展览休闲', '舞蹈芭蕾', '体育', '其他', '儿童亲子']
const selected = ref(null);
const cateColor = ref('deeppink')
const cateColorX = ref('white')
const detailList = ref([]);
function selectCategory(index) {
  selected.value = index;
  cateColor.value = ''
  cateColorX.value = ''
  classify.value = categories[index]
}

function selectCategoryR() {
  selected.value = null;
  cateColor.value = 'deeppink'
  cateColorX.value = 'white'
  classify.value = '全部'
}

// 更多城市
const moreCityOK = ref(false)

function moreCity() {
  if (moreCityOK.value) {
    moreCityOK.value = false
    leftUpHigh.value = '240'
    cityHeight.value = '90'
    visibleCities.value = cities.value.slice(0, 16);
  } else {
    moreCityOK.value = true
    leftUpHigh.value = '320'
    cityHeight.value = (leftUpHigh.value - 150).toString()
    visibleCities.value = cities.value
  }
}

// 城市选择
const cities = ref([])
const visibleCities = ref(cities.value.slice(0, 16));
const selectCities = ref(null);
const cityColor = ref('deeppink')
const cityColorX = ref('white')

function selectCity(index) {
  selectCities.value = index;
  cityColor.value = ''
  cityColorX.value = ''
  city.value = cities.value[index].name;
}

function selectCityR() {
  selectCities.value = null;
  cityColor.value = 'deeppink'
  cityColorX.value = 'white'
  city.value = '全国'
}

// 时间选择
const timeChoose = ['全部', '今天', '明天', '本周末', '一个月内']
const selectTimes = ref(0);

function selectTime(index) {
  selectTimes.value = index;
  time.value = timeChoose[index]
}

// 加载时逻辑
onMounted(() => {
  axios.get('http://localhost:8080/city/no').then(res => {
    cities.value = res.data
    visibleCities.value = cities.value.slice(0, 16);
  })
  axios.post("http://localhost:8080/detail/findAllDetail2").then((res) => {
    detailList.value = res.data;
  })
  axios.post('http://localhost:8080/classify/findCount', countFindData.value).then(res => {
    countFind.value = res.data
  })
})
// 监听变化逻辑
watch(() => city.value, () => {
  countFindData.value.city = city.value;
  axios.post('http://localhost:8080/classify/findCount', countFindData.value).then(res => {
    countFind.value = res.data
  })
})
watch(() => classify.value, () => {
  countFindData.value.classify = classify.value;
  axios.post('http://localhost:8080/classify/findCount', countFindData.value).then(res => {
    countFind.value = res.data
  })
})
watch(() => time.value, () => {
  countFindData.value.time = time.value;
  axios.post('http://localhost:8080/classify/findCount', countFindData.value).then(res => {
    countFind.value = res.data
  })
})
</script>

<template>
  <top-main :page="'classify'" :hide="'true'"></top-main>
  <el-backtop :bottom="100">
    <template #default>
      <div style="
        height: 60px;
        width: 50px;
        background-color: var(--el-bg-color-overlay);
        border: lightgray 1px solid;
        border-radius: 1px;
        text-align: center">
        <a style="font-size: 14px">回到顶部</a>
      </div>
    </template>
  </el-backtop>
  <div class="body">
    <div class="allNumber">
      <div>
        <b>共</b><span style="color: deeppink">{{ countFind }}</span><b>个商品</b>
      </div>
    </div>
    <div class="middleRow">
      <div class="left">
        <div class="left-up" :style="{ height: leftUpHigh + 'px' }">
          <div class="left-up-noBorder">
            <div class="left-up-width" :style="{ height: cityHeight + 'px' }">
              <span>
                <b style="color: gray;font-weight: 500">城 市:</b>
                <b style="color: gray;font-weight: 500;margin-left: 20px">当前选中城市</b>
                <a :style="{backgroundColor: Color,color: ColorX}">{{ city }}</a>
                <b class="left-up-width-click" @click="moreCity">更多
                  <el-icon :style="{ top: '2px' }">
                    <ArrowDown v-if="!moreCityOK"></ArrowDown>
                    <ArrowUp v-if="moreCityOK"></ArrowUp>
                  </el-icon></b>
              </span>
              <div style="width: 660px">
                <a :style="{backgroundColor: cityColor,color: cityColorX}"
                   class="cityAll" @click="selectCityR">全部</a>
                <ul class="ul-classifyX">
                  <li v-for="(itemCity, indexCity) in visibleCities" @click="selectCity(indexCity)"
                      :class="{ cityActive: indexCity === selectCities }"><a>{{ itemCity.name }}</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="left-up-border" style="margin-top: 40px">
            <div class="left-up-width" style="display: flex;flex-direction: row;height: 50px">
              <span>
                <b style="color: gray;font-weight: 500">分 类:</b>
              </span>
              <div style="width: 660px">
                <a :style="{backgroundColor: cateColor,color: cateColorX}"
                   class="cateAll"
                   @click="selectCategoryR">全部</a>
                <ul class="ul-classify">
                  <li v-for="(itemCate, indexCate) in categories"
                      @click="selectCategory(indexCate)"
                      :class="{ cateActive: indexCate === selected }">{{ itemCate }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
<!--          <div class="left-up-border">-->
<!--            <div class="left-up-width">-->
<!--              <span>-->
<!--                <b style="color: gray;font-weight: 500">时 间:</b>-->
<!--                <a @click="selectTime(indexTime)" v-for="(itemTime, indexTime) in timeChoose"-->
<!--                   :class="{ timeChooseColor: indexTime === selectTimes }">{{ itemTime }}</a>-->
<!--                <el-date-picker-->
<!--                    v-model="chooseDate"-->
<!--                    type="date"-->
<!--                    placeholder="选择日期"-->
<!--                    style="margin-left: 30px;width: 120px;"-->
<!--                />-->
<!--              </span>-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="left-down">
          <classify-left-down  :city="city" :classify="classify" :time="time" :countFind="countFind"></classify-left-down>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <a>您可能还喜欢</a>
        </div>
        <div class="right-body">
          <div class="t6" v-for="(item,index) in detailList" :key="index">
            <div style="display: flex" @click="$router.push('/introduce?id='+item.id)" >
              <details2 :t1=item.name :t2=item.address :t3=item.time :t4=item.price :t5=item.photo>
              </details2>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <local-bottom></local-bottom>
</template>

<style scoped lang="scss">
.cityActive {
  background-color: deeppink;
  color: white;
  pointer-events: none;
}
.t6 {
  width: 100%;
  height: 185px;
  display: flex;
}
.timeChooseColor {
  color: white;
  background-color: deeppink;
}

.cateActive {
  background-color: deeppink;
  color: white;
  pointer-events: none;
}

.ul-classify {
  margin-top: -24px;
  margin-left: 26px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    cursor: pointer;
    padding: 3px 8px;
    margin-left: 20px;
    list-style-type: none;
  }

  li:hover {
    background-color: deeppink;
    color: white;
  }
}

.ul-classifyX {
  margin-top: -10px;
  margin-left: 65px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    cursor: pointer;
    padding: 3px 8px;
    margin-left: 20px;
    list-style-type: none;
  }

  li:hover {
    background-color: deeppink;
    color: white;
  }
}

.left {
  width: calc(100% - 270px);
  display: flex;
  flex-direction: column;

  .left-up {
    width: 100%;
    border: lightgray 1px solid;
    border-radius: 2px;

    .left-up-width {
      margin-left: 35px;
      margin-top: 10px;

      .left-up-width-click {
        position: relative;
        left: 450px;
        top: 34px;
        color: gray;
        font-weight: 500;
        cursor: pointer;
      }

      span {
        font-size: 15px;

        a {
          cursor: pointer;
          margin-left: 20px;
          padding: 3px 8px;
        }

        a:hover {
          background-color: deeppink;
          color: white;
        }
      }
    }

    .left-up-border {
      margin-left: 15px;
      margin-top: 10px;
      width: calc(100% - 30px);
      border-top: lightgray 1px dotted;
    }

    .left-up-noBorder {
      margin-left: 15px;
      margin-top: 10px;
      width: calc(100% - 30px);
    }
  }

  .left-down {
    width: 100%;
    margin-top: 15px;
    border: lightgray 1px solid;
    border-radius: 2px;
  }
}

.right {
  width: 300px;
  height: 100%;
  margin-left: 10px;
  border: lightgray 1px solid;
  border-radius: 2px;

  .right-top {
    height: 34px;
    width: 100%;
    background-color: whitesmoke;
    display: flex;
    justify-content: left;
    align-items: center;
    border-bottom: lightgray 1px solid;

    a {
      font-size: 14px;
      margin-left: 15px;
    }
  }

  .right-body {
    width: 236px;
    height: 100%;
  }

  li {
    position: relative;
    left: -30px;
    margin-top: 20px;
    width: 230px;
    height: 135px;
    list-style-type: none;
  }
}

.middleRow {
  display: flex;
  flex-direction: row;
}

.body {
  display: flex;
  flex-direction: column;
  min-width: 1100px;
  margin: 0 auto;
}

.allNumber {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  position: relative;
  left: 0;
}

@media (min-width: 1700px) {
  .body {
    width: 1200px;
  }
}

.right-body-text {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 1px;
  left: 8px;
  width: 98%;
  height: 98%;

  .right-body-text-two {
    font-size: 13px;
    color: gray;
  }
}

.text-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cateAll {
  padding: 3px 8px;
  margin-left: 20px;
  cursor: pointer;
}

.cateAll:hover {
  background-color: deeppink;
  color: white;
}

.cityAll {
  padding: 3px 8px;
  position: relative;
  top: 14px;
  left: 58px;
  cursor: pointer;
}

.cityAll:hover {
  background-color: deeppink;
  color: white;
}
</style>